<template>
	<view>
		<picker mode="multiSelector" @change="doChange" @columnchange="doColumnChange" :value="self_value" :range="self_range">
			<input :disabled="true" placeholder-style="color:#bbbbbb" :placeholder="placeholder" :value="value_text" />
		</picker>
	</view>
</template>

<script setup>
import { ref, reactive, onBeforeMount, defineProps, defineEmits, toRaw, watch } from 'vue';
const props = defineProps({
	timestamp: {
		type: Number,
		default: 0
	},
	emptyText: {
		type: String,
		default: ''
	},
	placeholder: {
		type: String,
		default: ''
	}
});
const emit = defineEmits(['dtPickerChanged']);
// 当前时间
const now = new Date().getTime();
const self_range = ref([]);
let self_days = null;
let self_days_text = '';
let self_hours = null;
let self_seconds = null;
const self_value = ref([0, 0, 0]);
const value_text = ref();
onBeforeMount(() => {
	const days = [''];
	const days_text = [props.emptyText];
	for (let i = 0; i < 20; i++) {
		days.push(TIME_FORMAT(now + 86400000 * i, 'YYYY-MM-dd'));
		let text = TIME_FORMAT(now + 86400000 * i, 'M月d日');
		if (i == 0) {
			text += ' （今天）';
		}
		if (i == 1) {
			text += ' （明天）';
		}
		if (i == 2) {
			text += ' （后天）';
		}
		days_text.push(text);
		const hours = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
		const seconds = [
			'00',
			'01',
			'02',
			'03',
			'04',
			'05',
			'06',
			'07',
			'08',
			'09',
			'10',
			'11',
			'12',
			'13',
			'14',
			'15',
			'16',
			'17',
			'18',
			'19',
			'20',
			'21',
			'22',
			'23',
			'24',
			'25',
			'26',
			'27',
			'28',
			'29',
			'30',
			'31',
			'32',
			'33',
			'34',
			'35',
			'36',
			'37',
			'38',
			'39',
			'40',
			'41',
			'42',
			'43',
			'44',
			'45',
			'46',
			'47',
			'48',
			'49',
			'50',
			'51',
			'52',
			'53',
			'54',
			'55',
			'56',
			'57',
			'58',
			'59'
		];
		const range = [];
		range[0] = days_text;
		range[1] = hours;
		range[2] = seconds;
		self_range.value = range;
		self_days = days;
		self_days_text = days_text;
		self_hours = hours;
		self_seconds = seconds;
	}
});
const doChange = () => {
	value_text.value = getValueText();
	var day = self_days[self_value.value[0]];
	var hour = self_hours[self_value.value[1]];
	var second = self_seconds[self_value.value[2]];
	var datetime = '';
	if (day) {
		datetime = day + ' ' + hour + ':' + second;
	}
	var timestamp = 0;
	if (datetime) {
		timestamp = new Date(datetime.replace(/-/g, '/')).getTime();
	}

	emit('dtPickerChanged', {
		detail: {
			value: timestamp
		}
	});
};
const doColumnChange = (e) => {
	var value = self_value.value;
	value[e.detail.column] = e.detail.value;
	self_value.value = value;
};
const TIME_FORMAT = (t, fmt) => {
	const newDate = new Date();
	newDate.setTime(t);
	return newDate.VP_FORMAT(fmt);
};
const timestampChange = (timestamp) => {
	// 未初始化时不执行
	if (!self_days) {
		return;
	}
	if (timestamp > 0) {
		var days = self_days;
		var days_text = self_days_text;
		var hours = self_hours;
		var seconds = self_seconds;
	}
	if (timestamp < now) {
		timestamp = now;
	}
	var date = TIME_FORMAT(timestamp, 'YYYY-MM-dd');
	var hour = TIME_FORMAT(timestamp, 'hh');
	var minutes = TIME_FORMAT(timestamp, 'mm');
	var value = toRaw(self_value.value);
	for (var i = 0; i < days.length; i++) {
		if (date == days[i]) {
			value[0] = i;
			break;
		}
	}
	for (var i = 0; i < hours.length; i++) {
		if (hour == hours[i]) {
			value[1] = i;
			break;
		}
	}
	// console.log('VP---D>'+value[1]);
	for (var i = 0; i < seconds.length; i++) {
		if (minutes == seconds[i]) {
			value[2] = i;
			break;
		}
	}
	self_value.value = value;
	value_text.value = getValueText();
};
const getValueText = () => {
	var day = self_days_text[self_value.value[0]];
	var hour = self_hours[self_value.value[1]];
	var second = self_seconds[self_value.value[2]];
	if (self_days[self_value.value[0]] == '') {
		return day;
	} else {
		return day + ' ' + hour + ':' + second;
	}
};
// console.log(props, 'props')
watch(
	props.timestamp,
	(nd) => {
		timestampChange(nd);
	},
	{ immediate: true }
);
</script>

<style>
@import './dtPicker.css';
</style>
